<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="query.keywords" placeholder="请输入标题/单号" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <!-- <view class="search">
			<u-search v-model="query.keywords" @custom="search" @search="search"  height="80" placeholder="请输入标题/单号"></u-search>
		</view> -->
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="card-list">
        <view v-for="(item, index) in list" :key="index" class="card-item" @click="handleFlowRecord(item)">
          <view class="card-item-hd">{{item.title}}</view>
          <view class="card-item-bd">
            <view class="card-title">{{item.procDefName}}</view>
            <view class="card-desc">
              发起人：{{item.startUserName || '-'}}
            </view>
            <view class="card-desc">
              当前环节：{{item.taskName || '-'}}
            </view>
            <view class="card-desc">
              办理人：{{item.assigneeName || '-'}}
            </view>
            <view class="crad-desc">{{item.createTime}}</view>
          </view>
          <view class="card-item-ft">
            <view class="card-status">{{item.processStatusName}}</view>
            <view v-if="checkButtonPermission('work_own_detail')" class="card-button" @click.stop="handleFlowRecord(item)">详情
            </view>
            <view v-if="item.processStatus === 'running' && checkButtonPermission('work_own_cancel')"
              class="card-button danger" @click.stop="handleStop(item)">结束流程</view>
          </view>
        </view>
      </view>

      <!-- <view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;padding-left: 12rpx;padding-right: 12rpx;" @click="handleFlowRecord(item)">
				<u-row gutter="16" style="margin-top: 20rpx;">
					<u-col span="9" style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:bold">
						{{item.procDefName}}
					</u-col>
					<u-col span="3" style="text-align: right;">
						<view style="text-align: right;color: gray;margin-right: 10rpx;">
							<u-tag :text="item.processStatusName" shape="circle" type="warning" v-if="item.processStatus==='running'"></u-tag>
							<u-tag :text="item.processStatusName" shape="circle" type="danger" v-else-if="item.processStatus==='terminated'"></u-tag>
							<u-tag :text="item.processStatusName" shape="circle" v-else-if="item.processStatus==='completed'"></u-tag>
							<u-tag :text="item.processStatusName" shape="circle" type="danger" v-else-if="item.processStatus==='canceled'"></u-tag>
						</view>
					</u-col>
				</u-row>
				<FlowListItem :data="item"></FlowListItem>
				<u-row gutter="16" style="margin-top: 20rpx;margin-bottom: 10rpx;margin-right: 5rpx;">
					<u-col span="6" >
						<view style="text-align: left;color: gray;">
							{{item.createTime}}
						</view>
					</u-col>
					<u-col span="6" style="text-align: right;">
						<u-button v-if="checkButtonPermission('work_own_detail')" size="mini" shape="circle" :border="false" plain style="color:gray;margin-right: 10rpx;" @click="handleFlowRecord(item)">详情</u-button>
						<u-button v-if="item.processStatus === 'running' && checkButtonPermission('work_own_cancel')" size="mini" shape="circle" plain type="error" @click="handleStop(item)">结束流程</u-button>
					</u-col>
				</u-row>
			</view> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
  </view>
</template>
<script>
  import $time from '@/common/time.js';
  import FlowListItem from '@/pages/flowableplus/work/comp/FlowListItem.vue';
  export default {
    components: {
      FlowListItem
    },
    data() {
      return {
        query: {
          current: 1,
          size: 10,
          keywords: '',
        },
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        options: [],
        headStyle: {
          fontWeight: 'bold',
          color: '#606266',
          margin: '16rpx'
        },
        statusList: [],
        swiperCurrent: 0,
        dropdown: {
          borderBottom: false,
          activeColor: '#2979ff',
          mask: true,
        },
      };
    },
    onLoad(params) {
      if (params.createUser) {
        this.query.createUser = params.createUser;
      }
      this.loadList();
    },
    computed: {

    },
    methods: {
      checkButtonPermission(code) {
        return this.hasPermission(code);
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.loadList();
      },
      loadList() {
        this.$u.api.wflow.process.listOwnProcess(this.query).then(res => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          res.data.records.forEach((item) => {
            item.show = false;
          })
          this.list = this.list.concat(res.data.records);
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = "loadmore";
        });
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      handleClick(row) {
        this.navTo('form?id=' + row.id);
      },
      handleFlowRecord(row) {
        if (!this.checkButtonPermission('work_own_detail')) {
          return;
        }
        let procInsId = row.procInsId;
        let taskId = 0;
        let navigateBackUrl = 'pages/flowableplus/work/own/index';
        this.$u.route({
          url: 'pages/flowableplus/work/comp/detail',
          params: {
            procInsId,
            taskId,
            navigateBackUrl
          },
        })
      },
      handleStop(row) {
        let procInsId = row.procInsId;
        const params = {
          procInsId
        };
        let vm = this;
        uni.showModal({
          title: '提示',
          content: '是否要取消当前流程实例？',
          showCancel: true,
          success: function(res) {
            if (res.confirm) {
              vm.$u.api.wflow.task.stopProcess(params).then((res) => {
                vm.$u.toast(res.msg);
                vm.search();
              });
            }
          }
        });
      },
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .card-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .card-item {
    width: 100%;
    border-radius: 8rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 24rpx;
    background: #fff;
  }

  .card-item-hd {
    margin-bottom: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666;
  }

  .card-item-bd {
    font-size: 28rpx;
    font-weight: 500;
    color: #999;
  }

  .card-title {
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }

  .card-desc {
    margin-bottom: 8rpx;
  }

  .card-item-ft {
    display: flex;
    align-items: center;
    margin-top: 24rpx;
  }

  .card-status {
    display: inline-block;
    border-radius: 48rpx;
    padding: 0 36rpx;
    margin-right: auto;
    line-height: 48rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #FF6600;
    background: rgba(255, 232, 217, .15);
  }

  .card-button {
    display: inline-block;
    border-radius: 56rpx;
    padding: 0 28rpx;
    margin-left: 16rpx;
    line-height: 56rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #fff;
    background: #005EFF;

    &.danger {
      background: #D43030;
    }
  }
</style>